FIELDSET = {
    initControls: function(){
        this.initControlAdd();
        this.initControlRemove();
        this.initControlMove();
        if ($('#form-fieldset-add .controls .delete').length > 1) {
            $('#form-fieldset-add .controls .delete').removeClass('disabled');
        }
        this.addOrderToFields();
    }, 

    initControlMove: function(){
        $('#form-fieldset-add-fields').sortable({
            handle: '.controls .move',
            start: function(){
                $('#form-fieldset-add-fields').css('min-height', $('#form-fieldset-add-fields').height() + 100);
            },
            stop: function(){
                $('#form-fieldset-add-fields').css('min-height', 0);
                FIELDSET.addOrderToFields();
            },
        })
    },

    initControlAdd: function(){
        $(document).on('click', '#form-fieldset-add .controls .add', function(){
            var that = this;
            $.ajax({
                type: 'get',
                url: '/fieldset/form-part-field',
                success: function(res){
                    $(that).closest('fieldset').after(res);
                    $('#form-fieldset-add .controls .delete').removeClass('disabled'); // We have at least two fields, so we enable deleting
                    $('#form-fieldset-add-fields').sortable('refresh'); 
                    FIELDSET.addOrderToFields();
                },
                error: function(res){
                    genericError(res);
                }
            })
        });
    },

    addOrderToFields: function(){
        $('#form-fieldset-add-fields fieldset').each(function(i){ // Rewrite ids and fields names (the one we just added will be field_1_name, field_1_type etc.)
            this.id = this.id.replace(/fields_\d+/, 'fields_' + (i + 1));
            $('input, select, label', this).each(function(){
                var attrs = ['for', 'name', 'id']; 
                for (var j in attrs) {
                    if ($(this).attr(attrs[j])) {
                       $(this).attr(attrs[j], $(this).attr(attrs[j]).replace(/_\d+/, '_' + (i + 1)));
                    }
                }
            }) 
        });
    },

    initControlRemove: function(){
        $(document).on('click', '#form-fieldset-add .controls .delete:not(.disabled)', function(){
            $(this).closest('fieldset').remove().html('');
            var $controls = $('#form-fieldset-add .controls');
            if ($controls.length < 2) {
                $('.delete', $controls).addClass('disabled'); // We need at least one field, so we disable the remove control one there's only one.
            }
        });
    },

    addFieldsetDeleteHandler: function(){
        $('.delete-fieldset').click(function(){
            var $td = $(this).closest('td');
            $('#delete-confirmation-fieldset-fieldset-name').text($td.attr('data-fieldset-name'));
            $('#delete-confirmation input[name=id]').val($td.attr('data-fieldset-id'));
        });
    },

    init: function(){
        this.initControls();
        this.addFieldsetDeleteHandler();
    }
}

jQuery(function(){
    FIELDSET.init();
})